<template>
  <el-container class="container" :class="{ floded: floded }">
    <el-header>
      <img class="logo" src="../assets/logo.svg" alt="" />
      <span class="text">vue通用后台系统</span>

      <div class="right">
        <el-dropdown>
          <div>
            <img class="avatar" src="../assets/avatar.png" alt="" />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <fullScreen></fullScreen>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px" class="left">
        <el-icon :size="20" @click="floded = !floded" class="icon">
          <Fold v-if="!floded" />
          <Expand v-else />
        </el-icon>
        <el-menu style="margin-top: 20px" :unique-opened="true" :collapse="floded" active-text-color="#ffd04b"
          background-color="#545c64" class="el-menu-vertical-demo" :default-active="
            $route.path.includes('/setting') ? $route.name : $route.path
          " text-color="#fff" @open="handleOpen" @close="handleClose">
          <el-menu-item v-for="item in nochildren" :index="item.path" @click="handleMenu(item)">
            <el-icon>
              <component :is="item.meta.icon" />
            </el-icon>
            <span>{{ item.meta.title }}</span>
          </el-menu-item>
          <el-sub-menu :index="item.path" v-for="item in hasChildren">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>{{ item.meta.title }}</span>
            </template>
            <el-menu-item-group v-for="hasitem in item.children" @click="hashandleMenu(item, hasitem)">
              <el-menu-item :index="hasitem.path">{{
                hasitem.meta.title
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 面包屑 -->
        <breadcremb></breadcremb>
        <!-- tabs标签 -->
        <Tabs />
        <!--引入跳转路由-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { ref, computed } from 'vue'
import router from '../router'
import breadcremb from '../components/breadcrumb.vue'
import Tabs from '../components/commonTabs.vue'
import fullScreen from '../components/fullScreen.vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useStore } from 'vuex'

export default {
  components: {
    Document,
    Location,
    Setting,
    IconMenu,
    breadcremb,
    Tabs,
    fullScreen
  },
  props: {},
  computed: {
    hasChildren() {
      return this.routerPath[0].children.filter((item) => item.children)
    },
    nochildren() {
      return this.routerPath[0].children.filter(
        (item) => !item.children && item.meta
      )
    },
  },
  watch: {
    $route() {
      // console.log(this.$route);
      // sessionStorage.setItem('activeRouter', this.$route.path)
    },
  },
  setup() {
    const floded = ref(false)
    const routerPath = router.options.routes
    // const activeRouter = sessionStorage.getItem('activeRouter') || ''
    const store = useStore()
    const handleMenu = (path) => {
      //   sessionStorage.setItem('activeRouter', '/' + path.name)

      router.push(path.name)

      store.commit('selectMenu', path)
      sessionStorage.setItem('tabsList', JSON.stringify(store.state.tabsList))
    }
    const hashandleMenu = (fullpath, path) => {
      // console.log(fullpath);
      // console.log(path);
      const redirect = fullpath.redirect
      if (path.name === 'message') {
        const message = redirect.split('user')
        const pathRe = message[0].concat(path.name)
        router.push(pathRe)
        // sessionStorage.setItem('activeRouter', pathRe)
        store.commit('selectMenu', path)
        sessionStorage.setItem('tabsList', JSON.stringify(store.state.tabsList))
      } else {
        router.push(fullpath.redirect)
        // sessionStorage.setItem('activeRouter', fullpath.redirect)
        store.commit('selectMenu', path)
        sessionStorage.setItem('tabsList', JSON.stringify(store.state.tabsList))
      }
    }
   
    return {
      floded,
      routerPath,
      //   activeRouter,
      handleMenu,
      hashandleMenu,
      store,
    }
  },
}
</script>
<style lang="less">
* {
  outline: none;
}

.container {
  width: 100vw;
  height: 100vh;
}

.el-header {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 10px #999;
  position: fixed;
  top: 0;
  z-index: 9;

  .logo {
    width: 30px;
    height: 30px;
    position: relative;
    top: 15px;
    margin-right: 10px;
  }

  .text {
    position: relative;
    top: 5px;
    font-size: 18px;
  }

  .right {
    float: right;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;

    .avatar {
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin-right: 10px;
      border-radius: 50%;
    }

    .FullScreen {
      width: 21px;
      height: 21px;
      margin: 0 10px;
      position: absolute;
      top: 10px;
      right: 60px;
      cursor: pointer;
    }
  }
}

.el-aside {
  height: calc(100vh - 60px);
  background-color: #545c64;
  width: 200px;
  transition: width 0.4s;
  margin-top: 60px;
  overflow-x: hidden;

  .icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ccc;
    width: 100%;
    cursor: pointer;
  }
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu {
  border-right: 0;
}

/deep/.floded .el-menu {
  display: none;
}

.floded .left {
  width: 64px;
}

.el-main {
  // background-color: orange;
  margin-top: 60px;
}
</style>